<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/echarts-gl.min.js"></script>
	</head>

	<body>
		<div id="app" style="width: 1000px;height:700px; margin: 0 auto;"></div>
    </body>

	<script>
	var myChart = echarts. init(document.getElementById("app"));
		var mapName = 'china'
		var data = requestData();
		var geoCoordMap = {};
		/*获取地图数据*/
		myChart.showLoading();
		var mapFeatures = echarts.getMap(mapName).geoJson.features;
		myChart.hideLoading();
		mapFeatures.forEach(function(v) {
			// 地区名称
			var name = v.properties.name;
			// 地区经纬度
			geoCoordMap[name] = v.properties.cp;
		});

		var max = 480,
			min = 9; // todo 
		var maxSize4Pin = 100,
			minSize4Pin = 20;
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value),
					});
				}
			}
			return res;
		};
		option = {
			title: {
				text: "Java知音网站访问分布",
				x: 'center',
				textStyle: {
					color: "#1DE9B6",
					fontFamily: '等线',
					fontSize: 18
				},
				subtextStyle:{
					fontFamily:'等线'
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					if (typeof(params.value)[2] == "undefined") {
						var toolTiphtml = ''
						for(var i = 0;i<data.length;i++){
							if(params.name==data[i].name){
								toolTiphtml+=data[i].name+"<br>"+data[i].value;
							}
						}
						return toolTiphtml;
					} else {
						var toolTiphtml = ''
						for(var i = 0;i<data.length;i++){
							if(params.name==data[i].name){
								toolTiphtml+=data[i].name+"<br>"+data[i].value;
							}
						}
						return toolTiphtml;
					}
				}
			},
			legend: {
				orient: 'vertical',
				y: 'bottom',
				x: 'right',
				textStyle: {
					color: '#fff'
				}
			},

			/*工具按钮组*/
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					saveAsImage: {}
				}
			},
			backgroundColor: "#051b4a",
			geo: {
				show: true,
				map: mapName,
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false,
					}
				},
				roam: true,//一定为true 要不然缩放有问题
				itemStyle: {
					normal: {
						borderColor: 'rgba(147, 235, 248, 1)',
						borderWidth: 1,
						areaColor: 'rgba(128, 128, 128, 0.1)',
						shadowColor: 'rgba(128, 217, 248, 0.2)',
						shadowOffsetX: -5,
						shadowOffsetY: 5,
						shadowBlur: 10
					},
					emphasis: {
						areaColor: '#389BB7',
						borderWidth: 0
					}
				}
			},
			series: [{
					name: '散点',
					type: 'scatter',
					coordinateSystem: 'geo',
					data: convertData(data),
					symbolSize: function(val) {
						return val[2] / 10;
					},
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: true
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: 'rgba(147, 235, 248, 1)'
						}
					}
				},
				{
					name: '点',
					type: 'scatter',
					coordinateSystem: 'geo',
					symbol: 'pin', //气泡
					symbolSize: function(val) {
						var a = (maxSize4Pin - minSize4Pin) / (max - min);
						var b = minSize4Pin - a * min;
						b = maxSize4Pin - a * max;
						return a * val[2] + b;
					},
					label: {
						normal: {
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: 9,
							}
						}
					},
					itemStyle: {
						normal: {
							color: '#1DE9B6', //标志颜色
						}
					},
					zlevel: 6,
					data: convertData(data),
				},
				{
					name: 'Top 5',
					type: 'effectScatter',
					coordinateSystem: 'geo',
					data: convertData(data.sort(function(a, b) {
						return b.value - a.value;
					}).slice(0, 5)),
					symbolSize: function(val) {
						return val[2] / 10;
					},
					showEffectOn: 'render',
					rippleEffect: {
						brushType: 'stroke'
					},
					hoverAnimation: true,
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: 'yellow',
							shadowBlur: 10,
							shadowColor: 'yellow'
						}
					},
					zlevel: 1
				},
			]
		};
		myChart.setOption(option);
		
		function requestData(){
			var res = [
				{name:"北京",value:177},
				{name:"天津",value:42},
				{name:"河北",value:102},
				{name:"山西",value:81},
				{name:"内蒙古",value:47},
				{name:"辽宁",value:67},
				{name:"吉林",value:82},
				{name:"黑龙江",value:66},
				{name:"上海",value:24},
				{name:"江苏",value:92},
				{name:"浙江",value:114},
				{name:"安徽",value:109},
				{name:"福建",value:116},
				{name:"江西",value:91},
				{name:"山东",value:119},
				{name:"河南",value:137},
				{name:"湖北",value:116},
				{name:"湖南",value:114},
				{name:"重庆",value:91},
				{name:"四川",value:125},
				{name:"贵州",value:62},
				{name:"云南",value:83},
				{name:"西藏",value:9},
				{name:"陕西",value:80},
				{name:"甘肃",value:56},
				{name:"青海",value:10},
				{name:"宁夏",value:18},
				{name:"新疆",value:67},
				{name:"广东",value:123},
				{name:"广西",value:59},
				{name:"海南",value:14},
			];
			return res;
		}
	</script>
</html>